<%--
  Created by IntelliJ IDEA.
  User: xianfei
  Date: 15-7-2
  Time: 下午5:15
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<html>
<head>
    <title>预定</title>
    <script src="/static/datepicker/WdatePicker.js"></script>
    <script>
        $(function () {
            var content = '';
            var reg;
            var minDate;
            var maxDate;

            $('.alertBox').hide();
            $('.sure').click(function (e) {
                $('.alertBox').show();
                var text01 = $('.text01').val();
                var text02 = $('.text02').val();
                var content = '<li><span>' + text01 + '至' + text02 + '</span><img src="/public/img/weekdel.png" class="delete" width="18"/></li>'

                $('.alertBox ul').append(content);

                $('.delete').hide();
                //滑过li时删除键显示
                $('.alertBox ul li').hover(function (e) {
                    $(this).find('.delete').show();
                }, function () {
                    $(this).find('.delete').hide();
                });
                $('.delete').click(function (e) {
                    var data = $(this).siblings("span").html();
                    $.ajax({
                        url: '/reserve/cancel_disable',
                        type: 'post',
                        data: {cancelData: data},
                        success: function (data) {
                            reg = data.weekReg;
                        }
                    });
                    $(this).parent().remove();
                });
            });


            var guid = $("#houseWeekGuid").val();
            $.ajax({
                url: '/reserve/weekreg/' + guid,
                type: 'get',
                dateType: 'json',
                success: function (data) {
                    reg = data.weekReg;
                    minDate = data.minDate;
                    maxDate = data.maxDate;
                }
            });

            $("#start").focus(function () {
                WdatePicker({el: $dp.$('start'), isShowOK: false, minDate: minDate, maxDate: maxDate, disabledDates: reg, onpicked: function () {
                    end.focus();
                } });
                $("#end").on("focus", function () {
                    WdatePicker({el: $dp.$('end'), isShowOK: false, minDate: '#F{$dp.$D(\'start\',{d:1})}', maxDate: maxDate, disabledDates: reg});
                });
            });

            $("#addDate").on("click", function () {
                var start = $("#start").val();
                var end = $("#end").val();
                var guid = $("#houseWeekGuid").val();
                $.ajax({
                    url: '/reserve/disable',
                    type: 'post',
                    dataType: 'json',
                    data: {start: start, end: end, houseWeekGuid: guid},
                    success: function (data) {
                        $("#start").val('');
                        $("#end").val('');
                        content += '您已预定的时间为：' + start + '至' + end + '<br/>';
                        $("#reservedDate").html(content);
                        reg = data.weekReg;
                    }
                });
            });


        })
    </script>
</head>
<body>
<div>
    <input type="hidden" id="orderGuid" value="${orderGuid}">
    <input type="hidden" id="status" value="${reserveDTO.status}">
    <input type="hidden" id="buyNum" value="${reserveDTO.buyNum}">
    <input type="hidden" id="houseInfoGuid" value="${reserveDTO.houseInfoDTO.guid}">
    <input type="hidden" id="houseWeekGuid" value="${reserveDTO.houseWeekDTO.guid}">
</div>
<div class="main">
    <form:form commandName="" action="">
        <div class="head">
            <h1>预定入住</h1>

            <div class="headRight">
                <div class="hrBg"></div>
                <span>1、信息填写</span>
                <span class="distance">2、预定成功</span>
            </div>
        </div>
        <!--head结束-->

        <!--图片开始-->
        <div class="detail">
                <%--<img src="/public/image/${reserveDTO.houseInfoDTO.imageGuids[0]}" width="476" height="264">--%>

            <img src="/public/image/${reserveDTO.houseInfoDTO.imageGuids[0]}"  width="476" height="264">

            <div class="artical">
                <h2>${reserveDTO.houseInfoDTO.name}<br/></h2>

                <p>房屋周期：<span class="zhouci">${reserveDTO.houseWeekDTO.name}</span></p>

                <p>基地名称：${reserveDTO.houseBaseName}</p>

                <p>温馨提示：前台报“预定名”取房，凭个人有效证件登记</p>
            </div>
        </div>
        <!--图片结束-->

        <!--信息填写 开始-->
        <div class="message">
            <h2>1、预定时间</h2>
        <span>预定入住时间：<input type="text" class="text01 Wdate" id="start"/> 至
            <input type="text" class="text02 Wdate" id="end"/></span>
            <button class="sure" id="addDate">确定</button>
            <div class="alertBox">
                您选择的时间为：
                <ul>
                </ul>
            </div>
        </div>

        <div class="tianxie">
            <h2>2、填写信息</h2>
            <table>
                <tr>
                    <td><span> 入住人姓名：</span></td>
                    <td><input type="text" class="form-control input-lg" id="occupancyName"/></td>
                </tr>
                <tr>
                    <td><span>入住人身份证：</span></td>
                    <td><input type="text" class="form-control input-lg" id="IDCard"/></td>
                </tr>
                <tr>
                    <td><span>入住人手机号：</span></td>
                    <td><input type="text" class="form-control input-lg" id="phoneNum"/></td>
                </tr>
                <tr>
                    <td><span>邮箱：</span></td>
                    <td><input type="text" class="form-control input-lg" id="email"/></td>
                </tr>
                <tr>
                    <td><span>同行人：</span></td>
                    <td><input type="text" class="form-control input-lg" id="peers"/></td>
                </tr>
                <tr>
                    <td><span>备注：</span></td>
                    <td><input type="text" class="form-control input-lg" id="remarks"/></td>
                </tr>
            </table>
        </div>
        <!--信息填写 结束-->

        <div class="submit">
            <button>提交订单</button>
        </div>
    </form:form>
</div>
</body>
</html>